<template>
<div class="list">
	<div class="list_all" v-for="item in getlists" >
		<router-link :to="{name:'List_article',params:{id:item.id}}">
			<div class="list_top">
				<span class="left">{{item.first}}</span><span class="right">{{item.title}}</span>
			</div>
			<div class="list_bottom">
				<img :src="item.head" />
				<span class="left">{{item.autho}}</span>
				<span class="right">点击量：{{item.click}}</span>
			</div>
		</router-link>
	</div>
	<div class="loadMore" @click="loadMore()"><Button type="success" long >{{more}}~</Button></div>
</div>
</template>

<script>
import { mapState } from 'vuex'
export default {
	data(){
		return{
			num:8,
			more:'点击召唤'
		}
	},
	computed:{
		...mapState(['lists']),
       getlists:function(){
       	   let isArray =[];
       	   for(let i=0;i<this.num;i++){
       	   	  isArray[i]=this.lists[i];
       	   }
       	   return isArray;
       }
	},
	created(){

  },

   methods:{
	loadMore(){
		  if(this.num<this.lists.length){
		  	this.num+=5;
		  }
		  if(this.num>=this.lists.length){
		  	this.more='没有更多了';
		  }
		}
	}
}
</script>

<style scoped="scoped">
	.list{font-size: 16px;padding-bottom: 60px;}
	.list_top{overflow: hidden;}
	.list_top .left{float: left; width: 20%;color: black;}
	.list_top .right{float: right;width: 80%;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;color: black;}
	.list_bottom{overflow: hidden;}
	.list_bottom  img{height:30px;width: 30px;float: left; border-radius: 15px;}
	.list_bottom .left{float: left;width: 50%; color: gainsboro; line-height: 40px;}
	.list_bottom .right{float: right; color: gainsboro;line-height: 40px;}
	.loadMore{text-align: center;}
</style>
